<template>
    <j-modal
      width="1200"
      :title="title"
      :visible.sync="editModalVisible"
      :fullscreen.sync="fullscreen"
      :switch-fullscreen="switchFullscreen"
      @cancel="handleCancleDbSync"
      :destroyOnClose="true"
      :footer="false"
      :bodyStyle="{padding:'0px'}"
    >
      <div class="table-page-search-wrapper">
        <a-tabs default-active-key="1" tabPosition="left">
          <a-tab-pane key="1" style="padding-top:20px;">
            <span slot="tab">
              <a-icon type="file-text" />
              附加单据
            </span>
            <!-- 流程表单数据 -->
            <task-kdf :taskData="taskData"></task-kdf>
          </a-tab-pane>
          <a-tab-pane key="2" v-if="type !== 'history'">
            <span slot="tab">
              <a-icon type="user" />
              任务处理
            </span>
            <!-- 流程任务步骤 -->
            <!-- <task-step></task-step> -->

            <!-- 流程附件单据 -->
            <node-kdf ref="nodeKdf" :taskData="taskData" v-if="taskData.appendForm" style="margin-top:10px;"></node-kdf>

            <!-- 流程任务历史审批意见 -->
            <history-opinion-card  v-if="type === 'history'" style="margin-top:10px;"></history-opinion-card>

            <!-- 流程任务审批 -->
            <task-approval-card ref="taskApprovalCard" style="margin-top:10px;" v-if="taskData.nodeType === 0 && type !== 'history'"></task-approval-card>
            <div style="text-align:center;margin-top:10px;" v-if="type !== 'history'">
              <a-button type="primary" @click="taskSubmit">
                确认提交
              </a-button>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3">
            <span slot="tab">
              <a-icon type="sliders" />
              流程图
            </span>
            <div style="margin-bottom: 20px; height: 400px;overflow: auto;">
              <!-- <bpmn-viewer :xml="flowXml"></bpmn-viewer> -->
              <img v-if="bpmnSrc"  :src="'data:image/svg+xml;base64,'+bpmnSrc">
            </div>
            <!-- 流程历史跟踪 -->
            <history-process-card :taskData="taskData"></history-process-card>
          </a-tab-pane>
        </a-tabs>
      </div>
    </j-modal>
</template>
<script>
import bpmnViewer from '@/components/bpmn/bpmnViewer'
import historyOpinionCard from '../components/historyOpinionCard'
import taskStep from '../components/taskStep'
import taskApprovalCard from '../components/taskApprovalCard'
import taskKdf from '../components/taskKdf'
import nodeKdf from '../components/nodeKdf'
import historyProcessCard from '../components/historyProcessCard'
import { getFlowImgByInstanceId } from '@/api/task'
import { getFlowByModelId } from '@/api/process'
export default {
  name: 'taskModel',
  components: {
    bpmnViewer,
    historyOpinionCard,
    taskStep,
    taskApprovalCard,
    taskKdf,
    historyProcessCard,
    nodeKdf
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    taskData: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: '流程办理'
    }
  },
  data() {
    return {
      editModalVisible: false,
      fullscreen: true,
      switchFullscreen: true,
      bpmnSrc: '',
      flowXml: ''// 流程图
    }
  },
  methods: {
    handleCancleDbSync() {
      this.editModalVisible = false
    },
    reset(key) {
      this.approvalData[key] = null
    },
    async taskSubmit() {
      try {
        let formData
        if (this.taskData.appendForm) {
          formData = await this.$refs.nodeKdf.getKdfData()
        }
        const that = this
        this.$confirm({
          title: '提示',
          content: '确认提交审批吗?',
          onOk() {
            let data
            if (that.$refs.taskApprovalCard) {
              data = that.$refs.taskApprovalCard.approvalData
            } else {
              data = {
                reason: '同意',
                flag: 0
              }
            }
            that.$emit('submit', data, formData)
          }
        })
      } catch (err) {
        console.log(err)
      }
    },
    getFlowXml() {
      getFlowByModelId({ modelId: this.taskData.modelId }).then((res) => { // 查询已有流程
        if (res.success) {
          this.bpmnVisible = true
          if (res.result !== '{"id":"canvas","resourceId":"canvas","stencilset":{"namespace":"http://b3mn.org/stencilset/bpmn2.0#"}}') {
            this.flowXml = res.result
          } else {
            this.flowXml = ''
          }
        } else {
          this.$message.warning(res.message)
        }
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  updated() {
    getFlowImgByInstanceId({
      processInstanceId: this.taskData.processInstanceId
    }).then(res => {
      this.bpmnSrc = res.result
    })
    if (this.taskData.modelId) {
      this.getFlowXml()
    }
  }
}
</script>
<style>

</style>
